<template>
  <div class="order-settlement">
    <div class="header">
      <van-icon name="arrow-left" @click="goBack" />
      <span>订单结算</span>
      <van-icon name="headset-o" />
    </div>
    <div class="address" @click="dizhi">
      <div class="contact">
        <span>Daisy</span>
        <span>192****4486</span>
      </div>
      <div class="address-info">
        徐汇区黎梅花园88栋
      </div>
    </div>
    <div class="product-info">
      <img :src="productImg" alt="product" class="product-img" />
      <div class="product-desc">
        <p>索尼（SONY）Alpha 7 III全画幅微单数码相机</p>
        <p>【经典套机】28 - 70mm标准套装/黑色</p>
      </div>
      <div class="product-price">
        <span>￥{{ productPrice }}</span>
        <span>×{{ productQuantity }}</span>
      </div>
    </div>
    <div class="fee-info">
      <div class="fee-item">
        <span>运费</span>
        <span>￥{{ freight }}</span>
      </div>
      <div class="fee-item">
        <span>优惠</span>
        <span>{{ discountDesc }}</span>
      </div>
      <div class="fee-item">
        <span>订单备注</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="price-details">
      <h3>价格明细</h3>
      <div class="price-item">
        <span>商品总价</span>
        <span>￥{{ totalPrice }}</span>
      </div>
      <div class="price-item">
        <span>满减优惠</span>
        <span>￥{{ discountAmount }}</span>
      </div>
      <div class="price-item">
        <span>运费</span>
        <span>￥{{ freight }}</span>
      </div>
      <div class="divider"></div>
      <div class="price-item total">
        <span>合计</span>
        <span>￥{{ finalPrice }}</span>
      </div>
    </div>
    <div class="footer">
      <span>合计: ￥{{ finalPrice }}</span>
      <van-button type="primary" @click="submitOrder">提交订单</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Toast } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter();
// 模拟数据
const productImg = ref('../../src/assets/20.png'); // 替换为真实图片地址
const productPrice = ref(13220);
const productQuantity = ref(1);
const freight = ref(0);
const discountDesc = ref('满6000减100');
const totalPrice = ref(11220);
const discountAmount = ref(100);
const finalPrice = ref(11120);

// 返回上一页
const goBack = () => {
  // 这里可使用路由跳转回上一页，假设使用vue-router
  // 先引入router
  // import { useRouter } from 'vue-router';
  // const router = useRouter();
  // router.back();
  console.log('返回上一页');
};

// 提交订单
const submitOrder = () => {
      router.push('/PayOrder');
};
// 地址
const dizhi = () => {
      router.push('/shou');
};
</script>

<style scoped>
.order-settlement {
  padding: 16px;
  background-color: #f5f5f5;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.address {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.contact {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.address-info {
  color: #666;
}
.product-info {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  display: flex;
  margin-bottom: 16px;
}
.product-img {
  width: 80px;
  height: 80px;
  margin-right: 16px;
}
.product-desc {
  flex: 1;
}
.product-price {
  text-align: right;
}
.fee-info {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.fee-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.price-details {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.price-details h3 {
  margin-bottom: 8px;
  color: #666;
}
.price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.divider {
  height: 1px;
  background-color: #e0e0e0;
  margin-bottom: 8px;
}
.price-item.total {
  font-weight: bold;
  color: #333;
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 16px;
}
</style>